<template>
	<view>
		<view class="head_wrap">
			<image src="../../static/img/balance_bg.png" mode="aspectFill" class="bg"></image>
			<view class="row_between">
				<view style="display: flex;flex-direction: column;">
					<span class="balance_text">账户余额（元）</span>
					<span class="money" v-if="balance[0]">{{balance[0]}} <span class="money_small">.{{balance[1]}}</span> </span>
				</view>
				
				<view class="detail_btn" @click="goToDetail">查看明细</view>
			</view>
		</view>
		
		<div class=" bottom_item_wrap"  @click="goToTiXian">
			<div class="row_between bottom_item" >
				<image src="../../static/img/balance_tixian.png" class="icon" mode="aspectFill" />
				<div class="item_content row flex_one">
					<div class="col_between">
						<span class="text">提现</span>
					</div>
					<span style="flex: 1;"></span>
					<span class="arraw"></span>
				</div>
				
			</div>
		</div>
		
		<div class=" bottom_item_wrap" @click="goToBankList">
			<div class="row_between bottom_item" >
				<image src="../../static/img/balance_yhk.png" class="icon" mode="aspectFill" />
				<div class="item_content row flex_one">
					<div class="col_between">
						<span class="text">银行卡</span>
					</div>
					<span style="flex: 1;"></span>
					<span class="arraw"></span>
				</div>
				
			</div>
		</div>
		
		<div class=" bottom_item_wrap" @click="paycodeCheck" v-if="false">
			<div class="row_between bottom_item" >
				<image src="../../static/img/balance_mm.png" class="icon" mode="aspectFill" />
				<div class="item_content row flex_one">
					<div class="col_between">
						<span class="text">设置支付密码</span>
					</div>
					<span style="flex: 1;"></span>
					<span class="arraw"></span>
				</div>
				
			</div>
		</div>
		
		<div class=" bottom_item_wrap" @click="goToKefu">
			<div class="row_between bottom_item" >
				<image src="../../static/img/lianxi_icon.png" class="icon" mode="aspectFill" />
				<div class="item_content row flex_one" style="border-bottom: 2upx solid #FFFFFF;">
					<div class="col_between">
						<span class="text">联系客服</span>
					</div>
					<span style="flex: 1;"></span>
					<span class="arraw"></span>
				</div>
				
			</div>
		</div>
		
		
		<div class="modal-mask row_center" v-if="isShowFreeze" @touchmove.stop.prevent="moveHandle">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="col update_content_bg free_wrap">
						<image src="../../static/img/warning_icon.png" mode="aspectFill"></image>
						<span class="warning_info">您的账户已被冻结</span>
						<span class="kefu">若有疑问请联系客服</span>
						<span class="btn" @click="goToKnow">我知道了</span>
					</div>
				</div>
			</div>
		</div>
		
	</view>
</template>

<script>
	import { BASE_URL,check,balance,preset,paycodeCheck } from '@/utils/api'
	
	export default {
		data() {
			return {
				balance: '',
				isBindBank: true,
				isSetPwd: true,
				isAccount: false,
				isShowFreeze: false,
				noMoney: false,
				balanceMoney: 0
			}
		},
		methods: {
			goToKnow(){
				this.isShowFreeze = false;
			},
			goToDetail(){
				uni.navigateTo({
					url:'/pages/balance_list/balance_list'
				})
			},
			async check(){
				let res = await check();
				if(res.code == 1){
					// 获取成功
					this.isBindBank = true;
					this.isSetPwd = true;
					this.isAccount = false;
					this.noMoney = false;
				}else if(res.code == -22){
					// 未绑卡
					this.isBindBank = false;
				}else if(res.code == -55){
					//未设置支付密码
					this.isSetPwd = false;
				}else if(res.code == -44){
					//账户冻结
					this.isAccount = true;
				}else if(res.code == -33){
					this.noMoney = true;
				}
				
			},
			async balanceFunc(){
				let res = await balance();
				if(res.code == 1){
					// 获取成功
					this.balanceMoney = res.data;
					this.balance = parseFloat(res.data).toFixed(2).split(".");
				}
				
			},
			goToTiXian(){
				if(this.isAccount){
					//账户冻结
					this.isShowFreeze = true;
					return;
				}
				
				if(!this.isSetPwd){
					this.preset();
					return;
				}
				
				if(!this.isBindBank){
					uni.navigateTo({
						url:'/pages/add_bank/add_bank?tixian=1'
					});
					return;
				}
				
				if(this.noMoney){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:"您的余额不足"
					});
					return;
				}
				uni.navigateTo({
					url:'/pages/tixian/tixian?balance='+this.balanceMoney
				})
			},
			goToBankList(){
				if(this.isAccount){
					//账户冻结
					this.isShowFreeze = true;
					return;
				}
				uni.navigateTo({
					url:'/pages/bank_list/bank_list'
				})
			},
			async preset(){
				this.goToSetPayPwd();
			},
			async paycodeCheck(){
				let res = await paycodeCheck();
				if(res.code == 1){
					uni.navigateTo({
						url:'/pages/verify/verify'
					});
				}else if(res.code == 0){
					// 未设置支付密码
					this.preset();
				}else{
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:res.message
					});
				}
			},
			goToSetPayPwd(){
				uni.navigateTo({
					url:'/pages/set_pay_pwd/set_pay_pwd?tixian=1'
				})
			},
			goToKefu(){
				uni.navigateTo({
					url:'/pages/kefu/kefu'
				})
			}
		},
		onLoad(opt) {
			// this.balance = parseFloat(opt.balance).toFixed(2).split(".");
		},
		onShow() {
			this.check();
			this.balanceFunc();
		}
	}
</script>

<style>
	page{height: 100vh; background: #F6F6F6;}
	.head_wrap{position: relative; z-index: 1; padding: 40upx 32upx 0upx 60upx; height: 300upx; box-sizing: border-box;}
	.head_wrap .bg{width: 100%; height: 300upx; position: absolute;top: 0upx; left: 0upx;z-index: -1;}
	.head_wrap .balance_text{color: #1F1F26; font-size: 30upx; line-height: 1.0;}
	.head_wrap .detail_btn{color: #FFCA0A; font-size: 26upx; height:48upx; width: 160upx; line-height: 48upx; text-align: center;background: #333333;border-radius:8upx;}
	.head_wrap .money{color: #FE4444; font-size: 100upx; line-height: 1.0; margin-top: 40upx; font-weight: bold;}
	.head_wrap .money .money_small{color: #FE4444; font-size: 60upx;}
	
	.bottom_item_wrap{padding-left: 28upx;width: 100%; box-sizing: border-box;  height: 101upx; background: #FFFFFF;}
	.bottom_item{color: #333333; font-size: 28upx; height: 101upx; box-sizing: border-box;}
	.bottom_item .item_content{border-bottom: 2upx solid #E6E6E6; height: 101upx; padding-right: 30upx; box-sizing: border-box;}
	.bottom_item .icon{ margin-right: 16upx; width: 48upx; height: 48upx;}
	.bottom_item .text{color: #1F1F26; font-size: 32upx;}
	.bottom_item .info{color: #8F8F8F; font-size: 22upx;}
	
	.free_wrap image{width: 60upx; height: 60upx; margin-top: 40upx; margin-bottom: 30upx;}
	.free_wrap .warning_info{color: #333333; font-size: 32upx;}
	.free_wrap .kefu{color: #999999; font-size: 26upx; margin-top: 10upx; margin-bottom: 40upx;}
	.free_wrap .btn{color: #FFCA0A; font-size: 32upx; height: 100upx; line-height: 100upx; text-align: center;border-top: solid #E6E6E6 2upx;width: 100%; box-sizing: border-box;}
	
	
</style>
